<template>
    <div class="container">
        <a-layout class="course_container">
            <a-layout-header class="course_header">
                <span>学院管理</span>
            </a-layout-header>
            <a-layout-content class="course_content">
                <a-button type="primary" class="button_contain_item" style="margin-left: 0em" @click="addCollege('')">
                    新建
                </a-button>
                <a-button type="danger" class="button_contain_item" @click="showDeleteCourseModel">
                    删除
                </a-button>
                <a-table ref="tab" class="course_table"
                         size="small"
                         bordered
                         :pagination="pagination"
                         :data-source="collegeState.collegeList"
                         :columns="columns"
                         :row-selection="{onChange:change}"
                         :rowKey='record => record.collegeId'>
                    <template slot="operation" slot-scope="record">
                        <a-popconfirm
                                title="确认删除吗?"
                                @confirm="() => deleteCollege(record.collegeId)"
                        >
                            <a href="#">删除</a>
                        </a-popconfirm>
                        <a href="#" @click="showModify(record)">管理员设置</a>
                    </template>
                </a-table>
            </a-layout-content>
        </a-layout>
        <!--        get触发pageChange函数，返回并查询第一页数据-->
        <!--        gett触发getCourseList函数，返回当夜数据-->
        <AddCollege ref="addcs" @add="initData" ></AddCollege>
        <!--        批量删除确认Model-->
        <batch-delete-model ref="deletecs" @del="deleteBatchCollege"></batch-delete-model>
        <AddAndModifyCollegeAdmin ref="addAndMod" @over="getCollegeList"></AddAndModifyCollegeAdmin>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    import AddCollege from "./AddCollege";
    import BatchDeleteModel from "./BatchDeleteModel";
    import AddAndModifyCollegeAdmin from "./AddAndModifyCollegeAdmin";
    const rowSelection = {
        onChange: 'change',
    };
    export default {
        name: "CollegeManage",
        data() {
            return {
                pagination: {}, // 配置分页配置
                selectedRowKeys:[],//多选框，存储的值
                rowSelection,//选择时触发onchang函数
                //多选（前面复选框的内容）
                dataSource: [],//table中的数据
                columns: [
                    {
                        title: '学院ID',
                        key:'collegeId',
                        dataIndex: 'collegeId',
                        width: '20%',
                        align: 'center'
                    },
                    {
                        title: '学院名',
                        key:'name',
                        dataIndex: 'name',
                        align: 'center',
                        width: '28%',
                    },
                    {
                    title: '管理员',
                    key:'admin',
                    dataIndex: 'admin',
                    align: 'center',
                    width: '25%',
                    },
                    {
                        title: '操作',
                        key:'operation',
                        align: 'center',
                        scopedSlots: {customRender: 'operation'},
                    },
                ],//每一列的设置
            }
        },
        methods: {
            //获取多选框的值
            change(selectedRowKeys, selectedRows){
                this.selectedRowKeys=selectedRowKeys;
                this.selectedRowKeys=[];
                selectedRows.some(item=>{this.selectedRowKeys.push(item.collegeId)});
            },
            deleteCollege(key) { // 删除学院
                this.$store.dispatch("college/collegeDelete", {collegeId: key, token: this.accessState.token})
                .then(() => {
                    this.$message.success("删除成功")
                    this.initData() // 获取初始化数据
                })
            },
            initData(){ // 初始化分页
                this.dataSource=this.collegeState.collegeList
                this.pagination = { // 配置下面的分页
                    size: "small",
                    total: this.collegeState.collegeList.length,
                    showTotal: total => `共 ${total} 条`,
                    pageSizeOptions: ['10', '15', '20'],
                    defaultPageSize: 10,
                    showSizeChanger: true,
                    showQuickJumper: true
                }
            },
          showModify(record){
              this.$refs.addAndMod.showWindow(record);
          },
            getCollegeList(){ // 获取学院数据
                this.$store.dispatch("college/getCollegeList",{token:this.accessState.token}) // 获取学院列表信息
                .then(() => {
                    this.initData() // 初始化分页
                })
            },
            //显示批量删除弹窗
            showDeleteCourseModel(){
                if(this.selectedRowKeys.length === 0){
                    this.$message.info('所选内容不能为空');
                }else{
                    this.$refs.deletecs.showModel();
                }
            },
            //批量删除学院
            deleteBatchCollege(){
                this.$store.dispatch('college/collegeBatchDelete', {'collegeIds': this.selectedRowKeys, token: this.accessState.token})
                .then(() => {
                    this.$message.success("批量删除成功")
                    this.getCollegeList()
                    this.selectedRowKeys = []
                    this.initData()
                })
                .catch(() => {
                    this.$message.error("删除失败，请确保该学院下没有相关内容")
                })
            },
            //新建课程，调用Modal方法，使Modal显示出来
            addCollege(judge){
                this.$refs.addcs.showModel(judge);
            }
        },
        //初始化时，获取所有学院列表
        created() {
            this.getCollegeList(); // 获取初始化数据
        },
        components:{
          AddAndModifyCollegeAdmin,
            AddCollege,
            BatchDeleteModel
        },
        computed: {
            ...mapState({ // 这个是提取store中access文件夹目录下的数据
                'accessState': 'access',
                'collegeState': 'college',
            })
        }
    }
</script>

<style scoped>
    .container{
        width: 100%;
        height: 100%;
    }
    .course_container{
        width: 100%;
        background-color: #fff;
    }
    .course_header{
        height: 2.8em;
        text-align: left;
        font-size: 1.4em;
        font-weight: bolder;
        background-color: #fff;
        padding: 0em 1.5em;
    }
    .course_content{
        text-align: left;
        padding: 0em 2em;
        overflow: hidden;
    }
    .course_search{
        width: 30em;
        display: block;
    }
    .button_contain_item{
        width: 6em;
        margin: 1em 1.5em;
    }
    a{
        margin: 1em ;
    }
    .course_footer{
        background-color: #fff;
    }
</style>
<style>
    .course_table th{
        background-color: #cccccc !important;
        font-size: 1em !important;
        font-weight: bold !important;
    }
</style>
